<script setup lang="ts">
import myAuth from "@/composables/myAuth.ts";
const props = defineProps<{
    phone:string,
    type:'register'|'repassword'
}>();
const {getRegisterCode,getRepasswordCode,diffSendTime} = myAuth();
const sendCode = ()=>{
  switch (props.type){
    case "register":
      getRegisterCode(props.phone);
      break;
    case "repassword":
      getRepasswordCode(props.phone);
      break
  }
}
const emit = defineEmits(['update:code']);
const time = ref(0);
const timeId = setInterval(()=>time.value = diffSendTime())
console.log(diffSendTime());
onUnmounted(()=>clearInterval(timeId));
</script>

<template>
  <div class="code">
    <form-input placeholder="请输入验证码" @input="emit('update:code',($event.target as HTMLInputElement).value)"/>
    <el-button :disabled="time > 0" :type="time > 0 ? 'info' : 'primary'"  @click="sendCode()">
     {{time > 0 ? `请${time}秒后发送` : '发送验证码'}}
    </el-button>
  </div>
</template>

<style lang="scss" scoped>
div.code{
  @apply flex gap-2 items-center mt-4;
}
</style>